
/*
    Mobx 状态管理   跟redux 风格不同
    简单，直接写原生js就行
    安装mobx 和 跟react 的连接部件 mobx-react-lite(这个插件只能和函数组件配合) (类组价配合的是 mobx-react)
*/

// 导入countStore
import counterStore from './store-dome/counter'

// 导入中间件连接 mobx 和 react 完成响应式变化
import {observer} from 'mobx-react-lite'

// 使用一下 rootStore
import {useStore} from './store-dome/index'

function Test13_mobx() {
    // 获取根store
    const rootStore = useStore()
    console.log(rootStore);
    const {listStore} = useStore()
  return (
    <div>Test13_mobx
        {/* 把store中的count渲染一下 */}
        {counterStore.count}
        {/* 点击事件触发action函数修改count值 */}
        <button onClick={counterStore.addCount}>+</button>

        {/* 使用计算属性 */}
        {counterStore.filterList.join('-')}
        {/* 改变计算属性 */}
        <button onClick={counterStore.addList}>修改数组</button>

        {/* 使用 rootStore */}
        {rootStore.userStore.name}
        {/* 方法传参 */}
        <button onClick={() => rootStore.userStore.changeName('wawa')}>change</button>
        {listStore.list.join('>')}
    </div>
  )
}
// 高阶组件，需要用observer包裹才能完成响应式, 视图响应
export default observer(Test13_mobx)
